<template>
  <div id="heatMap">
    <v-header title="热力分析" ref="vHeader" @on-save="save" :dataMsg="downloadData"></v-header>
    <div class="box">
      <div class="box-con" v-show="toggleValue === 'index'">
        <div class="conditions-container bg-color-white ovh">
          <div class="query-conditions">
            <div class="common-conditions">
              <!------常用 start------>
              <div class="tags com-content">
                <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode" :setTransCode="setTransCode"
                              :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                              num="03"></v-pageHeader>
              </div>
            </div>
            <!------选择地区------>
            <div class="conditions">
              <span class="font12">选择地区</span>
              <el-select size="mini" class="width160" placeholder="请选择" v-model="selectMap" filterable>
                <el-option
                  v-for="item in mapList"
                  :key="item.map_id"
                  :label="item.map_name"
                  :value="item.map_id">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="queries bg-color-white ovh">
          <el-date-picker
            size="mini"
            class="timewidth210 height30"
            v-model="dates"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
          >
          </el-date-picker>
          <div class="btns rf">
            <el-radio v-model="count_type" label="MG00001">人数</el-radio>
            &nbsp;
            <el-radio v-model="count_type" label="MG00002">次数</el-radio>
            <el-button class="ml20" type="primary" size="mini" @click="search">查看</el-button>
            <el-button size="mini" @click="cancel">重置</el-button>
          </div>
        </div>
        <div class="barEcharts">
          <h2>{{map_name}}访问量统计</h2>
          <chart :options="option"></chart>
        </div>
        <div class="initial-user bg-color-white" v-if="tflag">
          <table class="table-rows" width="100%">
            <thead>
            <tr>
              <th>地区</th>
              <th>地区代码</th>
              <th>访问量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="selectMap === 'JX'" v-for="item in tableData" :key="item.key" @click="goUserList(item)">
              <td>{{item.name}}</td>
              <td>{{item.code}}</td>
              <td>{{item.value}}</td>
            </tr>
            <tr v-if="selectMap === 'GD'" v-for="item in gdDate" :key="item.key">
              <td>{{item.name}}</td>
              <td>{{item.code}}</td>
              <td>{{item.value}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 用户列表 -->
      <div v-show="toggleValue === 'userList'" class="userList">
        <user-list ref="userList" @on-goBack="toggleValue = 'index'" :selectStranCode="selectStranCode" pageName="userDetail"></user-list>
      </div>
      <!-- 用户详情 -->
      <div v-if="toggleValue === 'userDetail'" class="userDetail">
        <user-detail pageName="userList"></user-detail>
      </div>
    </div>
  </div>
</template>
<script>
  import './jiangxi'
  import './guangdong'

  import {VButton, VHeader, VPageHeader, VNumberSelect} from '../../../../components'
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import userList from '../../../../view/comm/userList.vue'
  import userDetail from '../../../../view/comm/userDetail'
  import store from '@/store'
  import Msg from '../../../../assets/js/msg'
  export default{
    components: {
      VButton,
      VHeader,
      VPageHeader,
      VNumberSelect,
      userList,
      userDetail
    },
    data () {
      return {
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        analyse_type: '03',
        count_type: 'MG00001', // 人数 次数
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        dates: [],
        tableData: [],
        tflag: false,
        downloadData: [], // 下载的数据
        selectMap: '',
        map_name: '广东省',
        mapList: [
          {map_id: 'JX', map_name: '江西省'},
          {map_id: 'GD', map_name: '广东省'}
        ],
        gdDate: [
          {
            'code': 'GD101',
            'name': '清远市',
            'value': '2'
          },
          {
            'code': 'GD102',
            'name': '韶关市',
            'value': '3'
          },
          {
            'code': 'GD103',
            'name': '湛江市',
            'value': '2'
          },
          {
            'code': 'GD104',
            'name': '梅州市',
            'value': '2'
          },
          {
            'code': 'GD105',
            'name': '河源市',
            'value': '2'
          },
          {
            'code': 'GD106',
            'name': '肇庆市',
            'value': '2'
          },
          {
            'code': 'GD107',
            'name': '惠州市',
            'value': '3'
          },
          {
            'code': 'GD108',
            'name': '茂名市',
            'value': '1'
          },
          {
            'code': 'GD109',
            'name': '江门市',
            'value': '1'
          },
          {
            'code': 'GD110',
            'name': '阳江市',
            'value': '1'
          },
          {
            'code': 'GD111',
            'name': '云浮市',
            'value': '2'
          },
          {
            'code': 'GD112',
            'name': '广州市',
            'value': '6'
          },
          {
            'code': 'GD113',
            'name': '汕尾市',
            'value': '3'
          },
          {
            'code': 'GD114',
            'name': '揭阳市',
            'value': '1'
          },
          {
            'code': 'GD115',
            'name': '珠海市',
            'value': '3'
          },
          {
            'code': 'GD116',
            'name': '佛山市',
            'value': '4'
          },
          {
            'code': 'GD117',
            'name': '潮州市',
            'value': '2'
          },
          {
            'code': 'GD118',
            'name': '汕头市',
            'value': '2'
          },
          {
            'code': 'GD119',
            'name': '深圳市',
            'value': '8'
          },
          {
            'code': 'GD120',
            'name': '东莞市',
            'value': '5'
          },
          {
            'code': 'GD121',
            'name': '中山市',
            'value': '3'
          }
        ],
        selectStranCode: api.SELECTANALYSEEVENTLIST, // 用户时间列表查询
        option: {
          tooltip: {
            trigger: 'item',
            // formatter: '{b}<br/>{c}'
            formatter: '0'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          visualMap: {
            min: 1,
            max: 10,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              type: 'map',
              mapType: 'guangdong', // 自定义扩展图表类型
              itemStyle: {
                normal: {label: {show: true}},
                emphasis: {label: {show: true}}
              },
              data: [

              ],
              // 自定义名称映射
              nameMap: {
                'GD101': '清远市',
                'GD102': '韶关市',
                'GD103': '湛江市',
                'GD104': '梅州市',
                'GD105': '河源市',
                'GD106': '肇庆市',
                'GD107': '惠州市',
                'GD108': '茂名市',
                'GD109': '江门市',
                'GD110': '阳江市',
                'GD111': '云浮市',
                'GD112': '广州市',
                'GD113': '汕尾市',
                'GD114': '揭阳市',
                'GD115': '珠海市',
                'GD116': '佛山市',
                'GD117': '潮州市',
                'GD118': '汕头市',
                'GD119': '深圳市',
                'GD120': '东莞市',
                'GD121': '中山市'
              }
            }
          ]
        }
      }
    },
    computed: {
      // 'index' 显示主页，'userList' 显示用户列表，'userDetail' 显示用户详情
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      save (obj) { // 点击保存为常用
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          from_date: this.from_date,
          to_date: this.to_date,
          count_type: this.count_type,
          analyse_type: this.analyse_type,
          map_id: this.selectMap
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, { anal_type: this.analyse_type }).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      goUserList (obj) {
        const paramsData = {
          message: {
            from_date: this.from_date,
            to_date: this.to_date,
            count_type: this.count_type,
            analyse_type: this.analyse_type
          },
          reqjson: obj
        }
        sessionStorage.setItem('from_date', this.from_date)
        sessionStorage.setItem('to_date', this.to_date)
        sessionStorage.setItem('paramsData', JSON.stringify(paramsData))
        ajax.post(api.SELECTANALYSEUSEROBJECTLIST, paramsData).then(res => {
          store.commit('updateToggleValue', 'userList')
          this.userList = res.data
          this.$refs.userList.getUserList(this.userList)
        })
      },
      // 获取日期
      getDate (list) {
        if (list) {
          this.from_date = list[0].replace(/-/g, '') + '000000'
          this.to_date = list[1].replace(/-/g, '') + '000000'
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      // 点击常用反显数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          this.count_type = data.count_type
          this.selectMap = data.map_id
          // 添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          this.dates = [data.from_date, data.to_date]
        })
      },
      cancel () {
        this.dates = [] // 时间
        this.from_date = ''
        this.to_date = ''
        this.count_type = 'MG00001' // 人数次数
        this.selectMap = '' // 选择地区
      },
      search () {
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        let paramsData = {
          from_date: this.from_date,
          to_date: this.to_date,
          count_type: this.count_type,
          analyse_type: this.analyse_type,
          map_id: this.selectMap
        }
        ajax.post(api.ANALYSESEARCHOBJECT, paramsData).then(res => {
          this.tableData = res.data.rows
          this.downloadData = this.tableData
          let dataList = []
          this.tableData.forEach(item => {
            let obj = {}
            obj.name = item.name
            obj.value = parseInt(item.value)
            dataList.push(obj)
          })
          this.tflag = true
          if (this.tableData.length < 1) {
            this.tflag = false
            Msg.alert('没有查找到数据')
            this.option.tooltip.formatter = '0'
          } else {
            this.option.tooltip.formatter = '{b}<br/>{c}'
          }
          if (this.selectMap === 'JX') {
            this.map_name = '江西省'
            this.option.series[0].mapType = 'jiangxi'
            this.option.series[0].data = dataList
            this.option.series[0].nameMap = {
                'JX101': '赣州市',
                'JX102': '吉安市',
                'JX103': '上饶市',
                'JX104': '九江市',
                'JX105': '抚州市',
                'JX106': '宜春市',
                'JX107': '南昌市',
                'JX108': '景德镇市',
                'JX109': '萍乡市',
                'JX110': '鹰潭市',
                'JX111': '新余市'
            }
          } else if (this.selectMap === 'GD') {
            this.map_name = '广东省'
            this.option.series[0].mapType = 'guangdong'
            this.option.series[0].data = this.gdDate
            this.option.series[0].nameMap = {
              'GD101': '清远市',
              'GD102': '韶关市',
              'GD103': '湛江市',
              'GD104': '梅州市',
              'GD105': '河源市',
              'GD106': '肇庆市',
              'GD107': '惠州市',
              'GD108': '茂名市',
              'GD109': '江门市',
              'GD110': '阳江市',
              'GD111': '云浮市',
              'GD112': '广州市',
              'GD113': '汕尾市',
              'GD114': '揭阳市',
              'GD115': '珠海市',
              'GD116': '佛山市',
              'GD117': '潮州市',
              'GD118': '汕头市',
              'GD119': '深圳市',
              'GD120': '东莞市',
              'GD121': '中山市'
            }
          }
          // this.option.series[0].data = dataList
        })
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #heatMap
    height 100%
    .box
      height calc(100% - 56px)
      padding 10px 0 20px 10px
      .box-con
        height 100%
        overflow auto
        .query-conditions
          .border-box
            border-bottom 1px solid #d8dce5
            border-top 1px solid #d8dce5
          .common-conditions
            /*border-bottom 1px solid #d8dce5*/
            .com-content
              height 50px
              line-height 50px
              padding 0 20px
              color #5a5e66
              font-size 0
              span.font12
                display: inline-block
                width 80px
                height 30px
                margin-right 10px
                font-size 12px
        .queries
          padding 0 20px
          height 50px
          line-height 50px
          .ml20
            margin-left 20px
        .conditions
          height 50px
          line-height 50px
          padding 0 20px
          border-bottom 1px solid #d8dce5
          .font12
            display inline-block
            width 80px
    .barEcharts
      & > h2
        height 50px
        line-height 50px
        font-weight 550
        font-size 16px
        color #6c7079
        text-align center
      .echarts
        position static
        width 100%
        height 600px

    .table-rows
      border: 1px solid #D8DCE5
      border-collapse collapse
      text-align center
      color #5A5E66
      margin 20px 0
      th
        font-weight normal
        border-left 1px solid #D8DCE5
        border-top 1px solid #D8DCE5
        height 36px
        font-size 14px
        background-color #f4f4f5
      tr td:last-child
        border-right 1px solid #D8DCE5
        border-bottom 1px solid #D8DCE5
      td
        border-left 1px solid #D8DCE5
        border-top 1px solid #D8DCE5
        height 36px
        padding 0 20px
        font-size 12px
        .blue-color
          color #016DFB
</style>
